<template>
  <div class="merchant-management">
    <el-card>
      <div slot="header" class="clearfix">
        <span class="page-title">
          <i class="el-icon-s-shop"></i>
          商家管理
        </span>
        <div class="header-actions">
          <el-button
            v-hasUserType="[4]"
            type="primary"
            @click="handleAddMerchant"
            icon="el-icon-plus">
            添加商家
          </el-button>
          <el-button style="float: right; padding: 3px 0" type="text" @click="loadMerchantList">刷新数据</el-button>
        </div>
      </div>

      <!-- 搜索筛选 -->
      <div class="search-section">
        <el-form :model="searchForm" :inline="true" class="search-form">
          <el-form-item label="商家名称">
            <el-input v-model="searchForm.name" placeholder="请输入商家名称" clearable></el-input>
          </el-form-item>
          <el-form-item label="添加时间">
            <el-date-picker
              v-model="searchForm.dateRange"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
              @change="handleDateChange"
              clearable>
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSearch" icon="el-icon-search">查询</el-button>
            <el-button @click="handleReset" icon="el-icon-refresh">重置</el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-- 商家列表表格 -->
      <configurable-table
        :columns="tableColumns"
        :data="merchantList"
        :loading="loading"
        :show-pagination="true"
        :current-page.sync="pagination.current"
        :page-size.sync="pagination.size"
        :pagination-total="pagination.total"
        @page-change="loadMerchantList"
        border
        stripe>
        <!-- 锁定用户上限列 -->
        <template #lockNumLimit="{ row }">
          <el-tag type="info" size="small">{{ row.lockNumLimit || 0 }}</el-tag>
        </template>
        <!-- 业务员编号列 -->
        <template #salesmanNo="{ row }">
          <span v-if="row.salesmanNo" class="salesman-no">{{ row.salesmanNo }}</span>
          <span v-else class="no-number">-</span>
        </template>
        <!-- 状态列 -->
        <template #status="{ row }">
          <el-tag :type="getStatusType(row.status)" size="small">
            {{ row.statusText }}
          </el-tag>
        </template>
        <!-- 操作列 -->
        <template #actions="{ row }">
          <div class="action-buttons">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-view"
              @click="handleView(row)">
              查看
            </el-button>
            <el-button
              size="mini"
              type="text"
              class="edit-btn"
              icon="el-icon-edit"
              @click="handleEdit(row)">
              编辑
            </el-button>
          </div>
        </template>
      </configurable-table>
    </el-card>

    <!-- 添加商家对话框 -->
    <el-dialog
      title="添加商家"
      :visible.sync="addDialogVisible"
      width="800px"
      :close-on-click-modal="false"
    >
      <el-form :model="addForm" :rules="addRules" ref="addForm" label-width="120px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="商家名称" prop="name">
              <el-input v-model="addForm.name" placeholder="请输入商家名称" maxlength="50"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系电话" prop="phone">
              <el-input v-model="addForm.phone" placeholder="请输入联系电话" maxlength="11"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="身份证号" prop="idNo">
              <el-input v-model="addForm.idNo" placeholder="请输入身份证号" maxlength="18"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="锁定用户上限" prop="lockNumLimit">
              <el-input-number
                v-model="addForm.lockNumLimit"
                :min="1"
                :max="10000"
                placeholder="请输入锁定用户上限"
                style="width: 100%">
              </el-input-number>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="商家地址" prop="address">
              <el-input v-model="addForm.address" placeholder="请输入商家地址" maxlength="200"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="业务员编号" prop="salesmanNo">
              <el-input v-model="addForm.salesmanNo" placeholder="请输入业务员编号" maxlength="20"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="区域ID" prop="regionId">
              <el-input-number
                v-model="addForm.regionId"
                :min="1"
                placeholder="请输入区域ID"
                style="width: 100%">
              </el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitAdd" :loading="addLoading">确定添加</el-button>
      </div>
    </el-dialog>

    <!-- 商家详情对话框 -->
    <el-dialog
      :visible.sync="detailDialogVisible"
      width="800px"
      :close-on-click-modal="false"
      custom-class="view-dialog"
      top="5vh"
    >
      <div slot="title" class="dialog-title-wrapper">
        <i class="el-icon-s-shop"></i>
        <span>商家详情</span>
      </div>

      <div class="detail-content" v-if="currentMerchant">
        <!-- 头部信息卡片 -->
        <div class="detail-header">
          <div class="avatar-section">
            <div class="avatar-circle">
              <img v-if="currentMerchant.avatar" :src="currentMerchant.avatar" class="avatar-img" alt="商家头像" />
              <i v-else class="el-icon-s-shop"></i>
            </div>
            <div class="status-badge">
              <el-tag :type="getStatusType(currentMerchant.status)" size="small">
                {{ getStatusText(currentMerchant.status) }}
              </el-tag>
            </div>
          </div>
          <div class="header-info">
            <h3 class="merchant-name">{{ currentMerchant.name }}</h3>
            <div class="merchant-phone-display">
              <i class="el-icon-phone"></i>
              <span>{{ currentMerchant.phone }}</span>
            </div>
          </div>
        </div>

        <!-- 基本信息 -->
        <div class="info-section">
          <div class="section-title">
            <i class="el-icon-s-shop"></i>
            <span>基本信息</span>
          </div>
          <div class="info-grid">
            <div class="info-item">
              <div class="info-label">
                <i class="el-icon-postcard"></i>
                <span>身份证号</span>
              </div>
              <div class="info-value">{{ maskIdNo(currentMerchant.idNo) }}</div>
            </div>
            <div class="info-item full-width">
              <div class="info-label">
                <i class="el-icon-location"></i>
                <span>商家地址</span>
              </div>
              <div class="info-value">{{ currentMerchant.address || '未填写' }}</div>
            </div>
          </div>
        </div>

        <!-- 业务信息 -->
        <div class="info-section">
          <div class="section-title">
            <i class="el-icon-data-line"></i>
            <span>业务信息</span>
          </div>
          <div class="info-grid">
            <div class="info-item">
              <div class="info-label">
                <i class="el-icon-s-shop"></i>
                <span>锁定用户上限</span>
              </div>
              <div class="info-value">
                <el-tag type="info" size="medium">{{ currentMerchant.lockNumLimit || 0 }}</el-tag>
              </div>
            </div>
            <div class="info-item">
              <div class="info-label">
                <i class="el-icon-s-custom"></i>
                <span>业务员编号</span>
              </div>
              <div class="info-value">
                <span v-if="currentMerchant.salesmanNo" class="salesman-no-detail">{{ currentMerchant.salesmanNo }}</span>
                <span v-else class="no-data">-</span>
              </div>
            </div>
            <div class="info-item">
              <div class="info-label">
                <i class="el-icon-map-location"></i>
                <span>区域ID</span>
              </div>
              <div class="info-value">{{ currentMerchant.regionId || '未指定' }}</div>
            </div>
          </div>
        </div>

        <!-- 时间信息 -->
        <div class="info-section">
          <div class="section-title">
            <i class="el-icon-time"></i>
            <span>时间信息</span>
          </div>
          <div class="info-grid">
            <div class="info-item">
              <div class="info-label">
                <i class="el-icon-date"></i>
                <span>入驻时间</span>
              </div>
              <div class="info-value time-value">{{ currentMerchant.createTime }}</div>
            </div>
            <div class="info-item" v-if="currentMerchant.updateTime">
              <div class="info-label">
                <i class="el-icon-refresh"></i>
                <span>更新时间</span>
              </div>
              <div class="info-value time-value">{{ currentMerchant.updateTime }}</div>
            </div>
          </div>
        </div>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="detailDialogVisible = false" size="medium">
          <i class="el-icon-close"></i>
          关闭
        </el-button>
      </div>
    </el-dialog>

    <!-- 编辑商家对话框 -->
    <el-dialog
      :visible.sync="editDialogVisible"
      width="700px"
      :close-on-click-modal="false"
      custom-class="action-dialog"
      top="8vh"
    >
      <div slot="title" class="dialog-title-wrapper">
        <i class="el-icon-edit"></i>
        <span>用户数量上限调整</span>
      </div>

      <div class="edit-content" v-if="currentMerchant">
        <!-- 商家基础信息展示 -->
        <div class="merchant-base-info">
          <div class="base-info-item">
            <div class="base-label">
              <i class="el-icon-s-shop"></i>
              商家名称
            </div>
            <div class="base-value">{{ currentMerchant.name }}</div>
          </div>
          <div class="base-info-item">
            <div class="base-label">
              <i class="el-icon-phone"></i>
              联系电话
            </div>
            <div class="base-value">{{ currentMerchant.phone }}</div>
          </div>
        </div>

        <!-- 可编辑表单 -->
        <div class="edit-form-section">
          <div class="form-section-title">
            <i class="el-icon-edit-outline"></i>
            <span>可编辑信息</span>
          </div>
          <el-form :model="editForm" :rules="editRules" ref="editForm" label-width="120px" class="edit-form">
            <el-row :gutter="20">
              <el-col :span="24">
                <el-form-item label="锁定用户上限" prop="lockNumLimit">
                  <div class="input-with-icon">
                    <i class="el-icon-user-solid form-icon"></i>
                    <el-input-number
                      v-model="editForm.lockNumLimit"
                      :min="1"
                      :max="10000"
                      placeholder="请输入锁定用户上限"
                      controls-position="right"
                      class="full-width-number">
                    </el-input-number>
                  </div>
                  <div class="form-tip">
                    <i class="el-icon-info"></i>
                    设置商家可锁定的最大用户数量
                  </div>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="24">
                <el-form-item label="商家地址">
                  <div class="input-with-icon">
                    <i class="el-icon-location form-icon"></i>
                    <el-input
                      v-model="editForm.address"
                      placeholder="请输入商家详细地址"
                      maxlength="200"
                      type="textarea"
                      :rows="3"
                      show-word-limit>
                    </el-input>
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false" size="medium">
          <i class="el-icon-close"></i>
          取消
        </el-button>
        <el-button type="primary" @click="submitEdit" :loading="editLoading" size="medium">
          <i class="el-icon-check"></i>
          确定修改
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getMerchantList,
  getMerchantDetail,
  updateMerchant,
  addMerchantAudit
} from '@/api/aggregation'

export default {
  name: 'MerchantManagement',
  data() {
    return {
      loading: false,
      merchantList: [],

      // 搜索表单
      searchForm: {
        name: '',
        dateRange: []
      },

      // 分页
      pagination: {
        current: 1,
        size: 10,
        total: 0
      },

      // 表格列配置
      tableColumns: [
        { prop: 'id', label: 'ID', minWidth: 80, align: 'center' },
        { prop: 'name', label: '商家名称', minWidth: 150, align: 'center', showOverflowTooltip: true },
        { prop: 'phone', label: '联系电话', minWidth: 140, align: 'center' },
        { prop: 'address', label: '商家地址', minWidth: 200, showOverflowTooltip: true },
        { prop: 'lockNumLimit', label: '锁定用户上限', minWidth: 120, align: 'center', slot: 'lockNumLimit' },
        { prop: 'salesmanNo', label: '业务员编号', minWidth: 120, align: 'center', slot: 'salesmanNo' },
        { prop: 'status', label: '状态', minWidth: 100, align: 'center', slot: 'status' },
        { prop: 'createTime', label: '入驻时间', minWidth: 160, align: 'center' },
        { prop: 'actions', label: '操作', minWidth: 200, align: 'center', slot: 'actions', fixed: false }
      ],

      // 添加对话框
      addDialogVisible: false,
      addLoading: false,
      addForm: {
        name: '',
        phone: '',
        idNo: '',
        address: '',
        lockNumLimit: 100,
        salesmanNo: '',
        regionId: null
      },
      addRules: {
        name: [
          { required: true, message: '请输入商家名称', trigger: 'blur' },
          { min: 2, max: 50, message: '商家名称长度在 2 到 50 个字符', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入联系电话', trigger: 'blur' },
          { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
        ],
        idNo: [
          { required: true, message: '请输入身份证号', trigger: 'blur' },
          { pattern: /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/, message: '请输入正确的身份证号', trigger: 'blur' }
        ],
        address: [
          { required: true, message: '请输入商家地址', trigger: 'blur' },
          { min: 5, max: 200, message: '地址长度在 5 到 200 个字符', trigger: 'blur' }
        ],
        lockNumLimit: [
          { required: true, message: '请输入锁定用户上限', trigger: 'blur' }
        ],
        salesmanNo: [
          { required: true, message: '请输入业务员编号', trigger: 'blur' },
          { min: 3, max: 20, message: '业务员编号长度在 3 到 20 个字符', trigger: 'blur' }
        ],
        regionId: [
          { required: true, message: '请输入区域ID', trigger: 'blur' }
        ]
      },

      // 详情对话框
      detailDialogVisible: false,
      currentMerchant: null,

      // 编辑对话框
      editDialogVisible: false,
      editLoading: false,
      editForm: {
        lockNumLimit: 100,
        address: ''
      },
      editRules: {
        lockNumLimit: [
          { required: true, message: '请输入锁定用户上限', trigger: 'blur' }
        ]
      }
    }
  },
  mounted() {
    this.loadMerchantList()
  },
  methods: {
    // 加载商家列表
    async loadMerchantList() {
      this.loading = true
      try {
        Logger.log('=== 加载商家列表 ===')

        const params = {
          pageIndex: this.pagination.current,
          pageSize: this.pagination.size,
          ...this.searchForm
        }

        // 处理日期范围
        if (this.searchForm.dateRange && this.searchForm.dateRange.length === 2) {
          params.startTime = this.searchForm.dateRange[0]
          params.endTime = this.searchForm.dateRange[1]
        }

        Logger.log('请求参数:', params)
        const response = await getMerchantList(params)
        Logger.log('商家列表API响应:', response)

        if (response.code === 0) {
          this.merchantList = response.data.list || []
          this.pagination.total = response.data.total || 0
        } else {
          this.$message.error('加载商家列表失败')
          this.merchantList = []
          this.pagination.total = 0
        }
      } catch (error) {
        Logger.error('加载商家列表失败:', error)
        this.$message.error('加载商家列表失败')
        this.merchantList = []
        this.pagination.total = 0
      } finally {
        this.loading = false
      }
    },

    // 日期范围改变
    handleDateChange(value) {
      this.searchForm.dateRange = value
    },

    // 搜索
    handleSearch() {
      this.pagination.current = 1
      this.loadMerchantList()
    },

    // 重置搜索
    handleReset() {
      this.searchForm = {
        name: '',
        dateRange: []
      }
      this.pagination.current = 1
      this.loadMerchantList()
    },

    // 添加商家
    handleAddMerchant() {
      this.addForm = {
        name: '',
        phone: '',
        idNo: '',
        address: '',
        lockNumLimit: 100,
        salesmanNo: '',
        regionId: null
      }
      this.addDialogVisible = true
    },

    // 提交添加
    async submitAdd() {
      try {
        await this.$refs.addForm.validate()
        this.addLoading = true

        Logger.log('=== 提交商家审核申请 ===')
        Logger.log('表单数据:', this.addForm)

        // 准备提交数据
        const submitData = {
          name: this.addForm.name,
          phone: this.addForm.phone,
          idNo: this.addForm.idNo,
          address: this.addForm.address,
          lockNumLimit: this.addForm.lockNumLimit,
          salesmanNo: this.addForm.salesmanNo,
          regionId: this.addForm.regionId
        }

        const response = await addMerchantAudit(submitData)
        Logger.log('提交商家审核申请API响应:', response)

        if (response.code === 0) {
          this.$message.success('商家审核申请提交成功，等待审核')
          this.addDialogVisible = false
          this.loadMerchantList()
        } else {
          this.$message.error(response.data?.msg || '提交审核申请失败')
        }
      } catch (error) {
        if (error !== false) { // 不是表单验证错误
          Logger.error('添加商家失败:', error)
          this.$message.error('添加商家失败: ' + (error.message || '未知错误'))
        }
      } finally {
        this.addLoading = false
      }
    },

    // 查看详情
    async handleView(row) {
      try {
        Logger.log('=== 查看商家详情 ===')
        Logger.log('商家ID:', row.id)

        const response = await getMerchantDetail({id: row.id})
        Logger.log('商家详情API响应:', response)

        if (response.code === 0) {
          this.currentMerchant = response.data
          this.detailDialogVisible = true
        } else {
          this.$message.error('获取商家详情失败')
        }
      } catch (error) {
        Logger.error('获取商家详情失败:', error)
        this.$message.error('获取商家详情失败')
      }
    },

    // 编辑商家
    handleEdit(row) {
      this.currentMerchant = { ...row }
      this.editForm = {
        lockNumLimit: row.lockNumLimit || 100,
        address: row.address || ''
      }
      this.editDialogVisible = true
    },

    // 提交编辑
    async submitEdit() {
      try {
        await this.$refs.editForm.validate()
        this.editLoading = true

        Logger.log('=== 更新商家信息 ===')
        Logger.log('商家ID:', this.currentMerchant.id)
        Logger.log('更新数据:', this.editForm)

        const updateData = {
          id: this.currentMerchant.id,
          lockNumLimit: this.editForm.lockNumLimit,
          address: this.editForm.address
        }

        const response = await updateMerchant(updateData)
        Logger.log('更新商家API响应:', response)

        if (response.code === 0) {
          this.$message.success('商家信息更新成功')
          this.editDialogVisible = false
          this.loadMerchantList()
        } else {
          this.$message.error(response.data?.msg || '更新失败')
        }
      } catch (error) {
        if (error !== false) { // 不是表单验证错误
          Logger.error('更新商家失败:', error)
          this.$message.error('更新失败: ' + (error.message || '未知错误'))
        }
      } finally {
        this.editLoading = false
      }
    },


    // 获取状态类型
    getStatusType(status) {
      const types = { 0: 'success', 1: 'danger'}
      return types[status] || 'info'
    },

    // 获取状态文本
    getStatusText(status) {
      const texts = { 0: '正常', 1: '已删除' }
      return texts[status] || '未知'
    },

    // 遮罩身份证号
    maskIdNo(idNo) {
      if (!idNo) return '未填写'
      if (idNo.length < 10) return idNo
      return idNo.substring(0, 6) + '****' + idNo.substring(idNo.length - 4)
    }
  }
}
</script>

<style scoped>
.merchant-management {
  padding: 20px;
}

.page-title {
  font-size: 18px;
  font-weight: 600;
  color: #303133;
  display: flex;
  align-items: center;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.search-section {
  margin-bottom: 20px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 6px;
}

.search-form .el-form-item {
  margin-bottom: 0;
}

/* 操作按钮样式 */
.action-buttons {
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.action-buttons .el-button {
  margin: 0;
  padding: 4px 8px;
  font-size: 12px;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.edit-btn {
  color: #E6A23C !important;
}

.edit-btn:hover {
  background-color: #fdf6ec;
  color: #E6A23C !important;
}

/* 业务员编号样式 */
.salesman-no {
  font-family: 'Courier New', monospace;
  font-weight: bold;
  color: #409eff;
  background: #f0f9ff;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
}

.no-number {
  color: #c0c4cc;
  font-style: italic;
}

/* 表格样式 */
.el-table {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.el-table th {
  background: #fafafa;
  color: #303133;
  font-weight: 600;
}

.el-table td {
  padding: 12px 0;
}

.el-table .cell {
  padding: 0 12px;
}


/* ===== 对话框标题样式 ===== */
.dialog-title-wrapper {
  display: flex;
  align-items: center;
  font-size: 18px;
  font-weight: 600;
  color: #303133;
}

.dialog-title-wrapper i {
  margin-right: 8px;
  font-size: 20px;
  color: #409eff;
}

/* ===== 商家详情对话框样式 ===== */
.detail-content {
  padding: 0;
  max-height: 70vh;
  overflow-y: auto;
}

/* 头部信息区域 */
.detail-header {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 30px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 8px;
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
}

.detail-header::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -50px;
  width: 200px;
  height: 200px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
}

.detail-header::after {
  content: '';
  position: absolute;
  bottom: -50px;
  left: -50px;
  width: 150px;
  height: 150px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 50%;
}

/* 头像区域 */
.avatar-section {
  position: relative;
  z-index: 1;
}

.avatar-circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fff 0%, #f5f5f5 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border: 4px solid rgba(255, 255, 255, 0.3);
}

.avatar-circle i {
  font-size: 36px;
  color: #667eea;
}

.avatar-circle .avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.status-badge {
  position: absolute;
  bottom: -5px;
  right: -5px;
  z-index: 2;
}

.status-badge .el-tag {
  border-radius: 12px;
  padding: 4px 10px;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* 头部信息文字 */
.header-info {
  flex: 1;
  color: white;
  z-index: 1;
}

.merchant-name {
  margin: 0 0 12px 0;
  font-size: 24px;
  font-weight: 600;
  color: white;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.merchant-phone-display {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  backdrop-filter: blur(10px);
  display: inline-flex;
  font-weight: 600;
  font-size: 14px;
}

.merchant-phone-display i {
  font-size: 16px;
}

/* 信息区块 */
.info-section {
  background: #ffffff;
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s ease;
  margin-bottom: 16px;
}

.info-section:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

.section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 20px;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-bottom: 1px solid #e4e7ed;
  font-weight: 600;
  font-size: 14px;
  color: #303133;
}

.section-title i {
  font-size: 16px;
  color: #409eff;
}

.info-grid {
  padding: 20px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 20px;
}

.info-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.info-item.full-width {
  grid-column: 1 / -1;
}

.info-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #909399;
  font-weight: 500;
}

.info-label i {
  font-size: 14px;
  color: #c0c4cc;
}

.info-value {
  font-size: 14px;
  color: #303133;
  font-weight: 500;
  padding: 8px 12px;
  background: #f8f9fa;
  border-radius: 6px;
  border: 1px solid #e4e7ed;
  transition: all 0.3s ease;
  min-height: 36px;
  display: flex;
  align-items: center;
}

.info-value:hover {
  background: #f0f2f5;
  border-color: #d4d7dc;
}

.time-value {
  font-size: 13px;
  color: #606266;
}

.salesman-no-detail {
  font-family: 'Courier New', monospace;
  font-weight: bold;
  color: #409eff;
  background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 14px;
}

.no-data {
  color: #c0c4cc;
  font-style: italic;
}

/* 响应式布局 */
@media (max-width: 768px) {
  .info-grid {
    grid-template-columns: 1fr;
  }

  .detail-header {
    flex-direction: column;
    text-align: center;
  }

  .avatar-circle {
    width: 70px;
    height: 70px;
  }

  .avatar-circle i {
    font-size: 32px;
  }

  .merchant-name {
    font-size: 20px;
  }
}

/* ===== 编辑商家对话框样式 ===== */
.edit-content {
  padding: 0;
}

/* 商家基础信息展示 */
.merchant-base-info {
  background: linear-gradient(135deg, #f5f7fa 0%, #e4e7ed 100%);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 24px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  border: 1px solid #dcdfe6;
}

.base-info-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.base-label {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: #909399;
  font-weight: 500;
}

.base-label i {
  margin-right: 4px;
  color: #c0c4cc;
}

.base-value {
  font-size: 15px;
  color: #303133;
  font-weight: 600;
  padding: 6px 10px;
  background: #fff;
  border-radius: 4px;
  border: 1px solid #e4e7ed;
}

/* 可编辑表单区 */
.edit-form-section {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  border: 1px solid #e4e7ed;
}

.form-section-title {
  display: flex;
  align-items: center;
  font-size: 15px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid #f0f0f0;
}

.form-section-title i {
  margin-right: 8px;
  font-size: 16px;
  color: #67c23a;
}

.edit-form {
  margin-top: 16px;
}

.input-with-icon {
  position: relative;
  display: flex;
  align-items: flex-start;
}

.form-icon {
  position: absolute;
  left: 14px;
  color: #c0c4cc;
  font-size: 16px;
  z-index: 10;
  pointer-events: none;
}

/* 针对单行输入框（input-number）的图标定位 */
.input-with-icon:has(.el-input-number) .form-icon {
  top: 50%;
  transform: translateY(-50%);
}

/* 针对多行输入框（textarea）的图标定位 */
.input-with-icon:has(.el-textarea) .form-icon {
  top: 15px;
  transform: none;
}

/* 使用深度选择器确保样式生效 */
.input-with-icon >>> .el-input__inner {
  padding-left: 42px !important;
}

.input-with-icon >>> .el-textarea__inner {
  padding: 12px;
  padding-left: 42px !important;
}

.input-with-icon .el-input-number {
  width: 100%;
}

.full-width-number {
  width: 100%;
}

.form-tip {
  display: flex;
  align-items: center;
  margin-top: 8px;
  padding: 8px 12px;
  background: #f0f9ff;
  border-left: 3px solid #409eff;
  border-radius: 4px;
  font-size: 12px;
  color: #606266;
}

.form-tip i {
  margin-right: 6px;
  color: #409eff;
  font-size: 14px;
}

/* ===== 对话框底部样式 ===== */
.dialog-footer {
  text-align: center;
  padding: 16px 0 0;
  border-top: 1px solid #f0f0f0;
}

.dialog-footer .el-button {
  min-width: 100px;
  padding: 10px 20px;
  font-weight: 500;
}

.dialog-footer .el-button i {
  margin-right: 4px;
}

/* ===== 响应式优化 ===== */
@media screen and (max-width: 768px) {
  .info-grid {
    grid-template-columns: 1fr;
  }

  .merchant-base-info {
    grid-template-columns: 1fr;
  }

  .merchant-name-section {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

/* ===== 自定义滚动条 ===== */
.detail-content::-webkit-scrollbar {
  width: 6px;
}

.detail-content::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.detail-content::-webkit-scrollbar-thumb {
  background: #c0c4cc;
  border-radius: 3px;
}

.detail-content::-webkit-scrollbar-thumb:hover {
  background: #909399;
}

/* 卡片头部样式 */
.el-card__header {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-bottom: 1px solid #dee2e6;
  border-radius: 8px 8px 0 0;
}

.el-card__header .clearfix {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
